<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Icon from "@iconify/svelte";
    import Drawer from "./Drawer.svelte";
    import { Link } from "../Typography";
    import Space from "../Space/Space.svelte";
    import { Button } from "../Button";
    import { RadioGroup } from "../RadioGroup";

    const { Story } = defineMeta({
        title: "Components/Views/Drawer",
        component: Drawer,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default" args={{ visible: false }}>
    {#snippet template(args)}
        <div style="height: 450px;">
            <Drawer bind:visible={args.visible} title="侧边栏">content</Drawer>
            <Button
                type="primary"
                onclick={() => {
                    args.visible = true;
                }}>打开</Button
            >
        </div>
    {/snippet}
</Story>

<Story name="WithInDom" args={{ visible: false }}>
    {#snippet template(args)}
        <div style="height: 450px; width: 800px; border: 1px solid #ccc; position: relative;">
            <Drawer transfer={false} bind:visible={args.visible} title="侧边栏">content</Drawer>
            <Button
                type="primary"
                onclick={() => {
                    args.visible = true;
                }}>打开</Button
            >
        </div>
    {/snippet}
</Story>

<Story name="Size" args={{ visible: false, size: 500 }}>
    {#snippet template(args)}
        <div style="height: 450px;">
            <Drawer bind:visible={args.visible} title="侧边栏" size={args.size}>content</Drawer>
            <Button
                type="primary"
                onclick={() => {
                    args.visible = true;
                }}>打开</Button
            >
        </div>
    {/snippet}
</Story>

<Story name="Align" args={{ visible: false, align: "right" }}>
    {#snippet template(args)}
        <div style="height: 450px;">
            <Drawer bind:visible={args.visible} align={args.align} title="侧边栏">content</Drawer>
            <Space dir="h">
                <RadioGroup
                    stick
                    bind:value={args.align}
                    data={[
                        { label: "Left", value: "left" },
                        { label: "Top", value: "top" },
                        { label: "Right", value: "right" },
                        { label: "Bottom", value: "bottom" },
                    ]}
                    onchange={(v: any) => {
                        args.align = v;
                    }}
                />
                <Button
                    type="primary"
                    onclick={() => {
                        args.visible = true;
                    }}>打开</Button
                >
            </Space>
        </div>
    {/snippet}
</Story>

<Story name="MaskCloseable" args={{ visible: false, maskCloseable: false }}>
    {#snippet template(args)}
        <div style="height: 450px;">
            <Drawer bind:visible={args.visible} title="侧边栏" maskCloseable={args.maskCloseable}>content</Drawer>
            <Button
                type="primary"
                onclick={() => {
                    args.visible = true;
                }}>打开</Button
            >
        </div>
    {/snippet}
</Story>

<Story name="DestroyOnClose" args={{ visible: false, destroyOnClose: true }}>
    {#snippet template(args)}
        <div style="height: 450px;">
            <Drawer bind:visible={args.visible} title="侧边栏" maskCloseable={args.maskCloseable}>
                content
                <p>{Math.random()}</p>
            </Drawer>
            <Button
                type="primary"
                onclick={() => {
                    args.visible = true;
                }}>打开</Button
            >
        </div>
    {/snippet}
</Story>

<Story name="Footer" args={{ visible: false, destroyOnClose: true }}>
    {#snippet template(args)}
        <div style="height: 450px;">
            <Drawer bind:visible={args.visible} maskCloseable={args.maskCloseable}>
                content
                <p>{Math.random()}</p>
                {#snippet title()}
                    <Space align="center">
                        <Icon icon="mdi:home" width={20} />
                        <span>侧边栏</span>
                    </Space>
                {/snippet}
                {#snippet footer()}
                    <Space>
                        <Button type="primary">Submit</Button>
                        <Button>Cancle</Button>
                    </Space>
                {/snippet}
            </Drawer>
            <Button
                type="primary"
                onclick={() => {
                    args.visible = true;
                }}>打开</Button
            >
        </div>
    {/snippet}
</Story>
